<template>
  <div>
    <div>
      <a-button @click="goBack">返回</a-button>
    </div>
    <div style="margin-top: 15px">
      已认证组织的[家校通讯录] 支持导入最多3万人 (含学生、教职工和家长)
      。若超过3万，点击
      <span style="color: #ff4d4f !important;">申请扩容</span>
    </div>
    <div
      style="
        margin-top: 15px;
        width: 100%;
        height: 90px;
        background-color: aliceblue;
      "
    >
      <div style="padding-top: 5px">
        1.导入会覆盖原有学生家长的信息，如需更新已存在的学生家长，请先导出通讯录，在导出表格里进行修改
      </div>
      <div style="padding-top: 5px">
        2.批量导入支持为一个学生最多添加6个家长
      </div>
      <div style="padding-top: 5px">
        3.钉钉将自动给未使用的家长发送邀请短信，短信内容:
        #学生家长#，#学校名称#通知你加入钉钉，与学校和班主任保持高效沟通。
      </div>
    </div>
    <div style="margin-top: 15px">
      <a-radio-group v-model="mode" @change="tabClick()" :style="{ marginBottom: '8px' }">
        <a-radio-button value="1"> 批量导入 </a-radio-button>
        <a-radio-button value="2"> 导出/修改(分班) </a-radio-button>
      </a-radio-group>
    </div>
    <div style="margin-top: 10px" v-show="mode==1">
      <a-radio-group v-model="mode2" :style="{ marginBottom: '8px' }">
        <a-radio-button value="3"> 行政班 </a-radio-button>
        <a-radio-button value="4"> 非行政班 </a-radio-button>
      </a-radio-group>
    </div>
    <div
      style="
        margin-top: 15px;
        width: 100%;
        height: 130px;
        background-color: #fff;
      "
    >
      <div style="margin-top: 8px" v-show="mode==1">
        1.下载通讯录模版，批量填写学生家长信息&nbsp;&nbsp;&nbsp;&nbsp;<a-button
          type="primary"
        >
          <a-icon type="download" />下载
        </a-button>
      </div>
      <div style="margin-top: 8px" v-show="mode==2">
        1.导出学生家长信息表，批量修改&nbsp;&nbsp;&nbsp;&nbsp;<a-button
          type="primary"
        >
        <a-icon type="import" />导出
        </a-button>
      </div>
      <div style="margin-top: 10px" v-show="mode==1">
        2.上传填写好的信息表&nbsp;&nbsp;&nbsp;&nbsp;<a-button type="primary">
          <a-icon type="upload" />上传文件
        </a-button>
      </div>
      <div style="margin-top: 10px" v-show="mode==2">
        2.上传修改好的信息表&nbsp;&nbsp;&nbsp;&nbsp;<a-button type="primary">
          <a-icon type="upload" />上传文件
        </a-button>
      </div>
      <div style="font-size: 10px;color: black;margin-top: 20px;">
        法律声明:企业通讯录导入服务由钊|研发并经授权企业营理员选泽开通、使用、管，相关数露序储于到制专属云存情空并日企业所有，钉制安全技术已通过相关机构认证，违放心使用
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Demo",
  data() {
    return {
      mode: "1",
      mode2: "3",
    };
  },
  methods: {
    goBack() {
      this.$router.back();
    },
    tabClick(){
       
    }
  },
};
</script>

<style scoped></style>
